<template>
  <div>
    <a-modal
    title="表格设计"
    :visible="visible"
    @cancel="hideModal"
    :maskClosable="false"
    destroyOnClose
    width="100%"
    :footer="null"
    :mask="false"
    :dialogStyle="{ top: 0 }"
    style="overflow: hidden;"
    :bodyStyle="{
      overflow: 'auto',
      padding: '0px',
    }"
  >
    <a-spin :spinning="spinning">
      <designer-index ref="designerIndex" @save="save"/>
    </a-spin>
  </a-modal>
  </div>
</template>

<script>
import DesignerIndex from '@/pages/table/index'
// import { deepClone, widgetRandomId } from '@/utils/tools'
export default {
  components: { DesignerIndex },
  props: [],
  data() {
    return {
      spinning: true,
      visible: false
    }
  },
  computed: {},
  watch: {},
  created() {
    this.formData = Object.assign({}, this.defaultFormData)
  },
  mounted() {},
  methods: {

    //     fieldName: "id"
    // fieldNote: "主键"
    // fieldType: "Long"
    // formRequired: true
    // formType: "text"
    // inForm: true
    // inSearch: false
    // inTable: true
    // key: 0

    showModal(data) {
      this.visible = true
      const columns = []
      const searchItems = []
      data.forEach(v => {
        if (v.inTable) {
          columns.push({
            field: v.fieldName,
            title: v.fieldNote,
            sorter: false,
            align: 'left',
            width: '100',
            hidden: false
          })
        }
        if (v.inSearch) {
          searchItems.push({
            dataIndex: v.fieldName,
            label: v.fieldNote,
            type: 'text'
          })
        }
      })
      /* 默认生成的操作 编辑，删除 */
      const opers = [
        {
          label: '编辑',
          permission: '${permission}:edit',
          color: '#1890ff',
          sites: 'edit'
        },
        {
          label: '删除',
          permission: '${permission}:dels',
          color: '#f5222d',
          sites: 'dels'
        }
      ]
      const tableOptions = {
        url: '',
        method: 'get',
        queryParams: {},
        showColumns: true,
        showRefresh: true,
        changeSize: true,
        showCheckBox: false,
        showIndex: true,
        columns: columns,
        operate: {
          width: 200,
          items: opers
        }
      }
      /* 初始化工具条 */
      const toolsArray = [
        {
          sites: 'add',
          label: '添加',
          type: 'primary',
          icon: 'plus'
        },
        {
          sites: 'dels',
          label: '批量删除',
          type: 'danger',
          icon: 'delete'
        }
      ]
      setTimeout(() => {
        this.$refs.designerIndex.init({ tableOptions, searchItems, toolsArray })
        this.spinning = false
      }, 1000)
    },
    showHistory(data) {
      this.visible = true
      setTimeout(() => {
        this.$refs.designerIndex.init(data)
        this.spinning = false
      }, 1000)
    },
    save(c) {
      this.$emit('success', c)
      this.hideModal()
    },
    hideModal() {
      this.confirmLoading = false
      this.visible = false
    },
    handleOk() {
      this.confirmLoading = true
      this.$refs['myForm'].validate((valid) => {
        if (!valid) {
          this.confirmLoading = false
          console.log('error')
        } else {
          // TODO 提交表单
          console.log(this.formData)
          this.confirmLoading = false
          this.hideModal()
        }
      })
    }
  }
}
</script>
<style scoped lang="less">
/*复选框样式*/
.ant-checkbox-wrapper + .ant-checkbox-wrapper {
  margin-left: 0px;
}
</style>
